<template>
  <div class="product-page-generator">
    <!-- 触发按钮 -->
    <el-button
      :type="buttonType"
      :size="buttonSize"
      :icon="buttonIcon"
      :circle="!buttonText"
      :disabled="disabled"
      @click="showDialog"
    >
      {{ buttonText }}
    </el-button>

    <!-- 生成网页对话框 -->
    <el-dialog
      title="生成产品网页"
      :visible.sync="dialogVisible"
      width="60%"
      append-to-body
      :close-on-click-modal="false"
      @close="handleClose"
    >

      <el-form :model="form" label-width="120px" label-position="left">
        <el-form-item label="产品名称">
          <el-input v-model="form.product_name" placeholder="请输入产品名称" />
        </el-form-item>

        <el-form-item label="产品图片">
          <div class="upload-container">
            <!-- 粘贴上传区域 -->
            <div v-loading="imageLoading" class="paste-area" tabindex="0" @paste="handlePaste" @click="focusPasteArea" @dragover.prevent @drop="handleDrop">
              <div v-if="!form.images || !form.images.length" class="paste-tip">
                <i class="el-icon-picture-outline" />
                <div>选择本框，直接粘贴图片或拖拽图片</div>
                <div style="font-size: 12px; color: #909399; margin-top: 5px;">也可以粘贴图片URL链接</div>
              </div>
              <div v-else class="paste-images">
                <div
                  v-for="(img, index) in form.images"
                  :key="index"
                  class="image-item"
                  :class="{ 'dragging': dragIndex === index, 'drag-over': dragOverIndex === index }"
                  draggable="true"
                  @dragstart="handleDragStart(index, $event)"
                  @dragover.prevent="handleDragOver(index, $event)"
                  @dragenter.prevent="handleDragEnter(index, $event)"
                  @dragleave="handleDragLeave(index, $event)"
                  @drop.prevent="handleDragDrop(index, $event)"
                  @dragend="handleDragEnd($event)"
                >
                  <img :src="img" class="preview-image" @click="previewImage(img)" @dragstart.prevent>
                  <i class="el-icon-delete delete-icon" @click.stop="removeImage(index)" />
                  <div class="drag-handle">
                    <i class="el-icon-s-grid" />
                  </div>
                </div>
              </div>
            </div>

            <!-- URL添加区域 -->
            <div class="url-input-area">
              <el-input
                v-model="imageUrlInput"
                placeholder="或者输入图片URL链接"
                class="url-input"
                @keyup.enter="addImageUrl"
              >
                <el-button slot="append" :disabled="!imageUrlInput" @click="addImageUrl">添加</el-button>
              </el-input>
            </div>

            <!-- 文件选择按钮 -->
            <div class="file-upload-area">
              <el-button type="text" icon="el-icon-folder-opened" @click="triggerFileInput">选择文件</el-button>
              <input
                ref="fileInput"
                type="file"
                style="display: none"
                accept="image/*"
                multiple
                @change="handleFileChange"
              >
            </div>
          </div>
        </el-form-item>

        <el-form-item label="选择站点" required>
          <el-select
            v-model="form.staticsite_id"
            placeholder="请选择静态站点"
            style="width: 100%"
            :loading="siteLoading"
            @change="handleSiteChange"
          >
            <el-option
              v-for="site in siteList"
              :key="site.id"
              :label="site.site_name"
              :value="site.id"
            >
              <span style="float: left">{{ site.site_name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ site.root_domain }}</span>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="选择分类" required>
          <el-select
            v-model="form.category_id"
            placeholder="请先选择站点"
            style="width: 100%"
            :disabled="!form.staticsite_id"
            :loading="categoryLoading"
          >
            <el-option
              v-for="category in categoryList"
              :key="category.id"
              :label="category.name"
              :value="category.id"
            >
              <span style="float: left">{{ category.name }}</span>
              <span v-if="category.description" style="float: right; color: #8492a6; font-size: 13px">{{ category.description }}</span>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="选择模板" required>
          <el-select
            v-model="form.template_id"
            placeholder="请先选择站点"
            style="width: 100%"
            :disabled="!form.staticsite_id"
            :loading="templateLoading"
          >
            <el-option
              v-for="template in templateList"
              :key="template.id"
              :label="template.name"
              :value="template.id"
            >
              <span style="float: left">{{ template.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ getTemplateTypeText(template.template_type) }}</span>
            </el-option>
          </el-select>
          <div v-if="form.template_id && selectedTemplate" style="margin-top: 5px; color: #909399; font-size: 12px;">
            {{ selectedTemplate.description || '暂无模板描述' }}
          </div>
        </el-form-item>

        <el-form-item v-if="showEngineSelector" label="AI引擎">
          <el-select
            v-model="form.engine"
            placeholder="请选择AI引擎"
            style="width: 100%"
            :loading="engineLoading"
          >
            <el-option
              v-for="engine in aiEngines"
              :key="engine.value"
              :label="engine.label"
              :value="engine.value"
            />
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" :disabled="!canGenerate" @click="handleGenerate">
          <i class="el-icon-magic-stick" /> 生成网页
        </el-button>
      </div>

      <!-- AI任务组件 -->
      <AITask
        ref="aiTask"
        task-name="ai_generate_product_page"
        show-name="生成网页"
        :params="aiParams"
        dialog-title="AI生成产品网页"
        dialog-width="80%"
        style="display: none;"
        @final-result="handleAIResult"
        @close="handleAITaskClose"
      />
    </el-dialog>

    <!-- 图片预览对话框 -->
    <el-dialog title="图片预览" :visible.sync="imagePreviewVisible" width="50%">
      <div class="image-preview-container">
        <img :src="previewImageUrl" alt="预览图片" style="width: 100%; max-height: 500px; object-fit: contain;">
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getStaticSiteList, getStaticSiteCategoryList, getHtmlTemplateList } from '@/api/spider/static_site'
import { Get as GetAiPrompt } from '@/api/cms/aiprompt'
import { Post as UploadBase64Image } from '@/api/cms/image'
import AITask from '@/components/AITask'
import qs from 'qs'

export default {
  name: 'ProductPageGenerator',
  components: {
    AITask
  },
  props: {
    // 产品图片列表
    images: {
      type: Array,
      default: () => []
    },
    // 产品名称
    productName: {
      type: String,
      default: ''
    },
    // 按钮文本
    buttonText: {
      type: String,
      default: '生成网页'
    },
    // 按钮类型
    buttonType: {
      type: String,
      default: 'primary'
    },
    // 按钮大小
    buttonSize: {
      type: String,
      default: 'small'
    },
    // 按钮图标
    buttonIcon: {
      type: String,
      default: 'el-icon-magic-stick'
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否显示引擎选择器
    showEngineSelector: {
      type: Boolean,
      default: true
    },
    // 默认引擎
    defaultEngine: {
      type: String,
      default: 'default'
    }
  },
  data() {
    return {
      dialogVisible: false,
      siteLoading: false,
      categoryLoading: false,
      templateLoading: false,
      engineLoading: false,
      imageLoading: false,
      siteList: [],
      categoryList: [],
      templateList: [],
      aiEngines: [],

      form: {
        product_name: '',
        images: [],
        staticsite_id: null,
        category_id: null,
        template_id: null,
        engine: 'default'
      },

      // 图片预览
      imagePreviewVisible: false,
      previewImageUrl: '',

      // 图片URL输入
      imageUrlInput: '',

      // 拖拽状态
      dragIndex: null,
      dragOverIndex: null
    }
  },
  computed: {
    // 是否可以生成
    canGenerate() {
      return this.form.staticsite_id && this.form.category_id && this.form.template_id && this.form.product_name
    },
    // 当前选中的模板
    selectedTemplate() {
      return this.templateList.find(template => template.id === this.form.template_id)
    },
    // AI任务参数
    aiParams() {
      return {
        images: this.form.images,
        staticsite_id: this.form.staticsite_id,
        category_id: this.form.category_id,
        template_id: this.form.template_id,
        product_name: this.form.product_name,
        engine: this.form.engine
      }
    }
  },
  watch: {
    // 监听父组件传入的参数变化
    images: {
      handler(newVal) {
        this.form.images = newVal || []
      },
      immediate: true
    },
    productName: {
      handler(newVal) {
        this.form.product_name = newVal || ''
      },
      immediate: true
    },
    defaultEngine: {
      handler(newVal) {
        this.form.engine = newVal || 'default'
      },
      immediate: true
    }
  },
  methods: {
    // 显示对话框
    showDialog() {
      this.dialogVisible = true
      this.loadSiteList()
      this.loadAiEngines()
    },

    // 关闭对话框
    handleClose() {
      this.dialogVisible = false
      this.resetForm()
    },

    // 重置表单
    resetForm() {
      this.form.staticsite_id = null
      this.form.category_id = null
      this.form.template_id = null
      this.categoryList = []
      this.templateList = []
    },

    // 加载站点列表
    loadSiteList() {
      this.siteLoading = true
      const params = {
        pageSize: 100,
        page: 1
      }

      getStaticSiteList(new URLSearchParams(params).toString())
        .then(response => {
          if (response.success) {
            this.siteList = response.data.data.filter(site => site.is_active)
          } else {
            this.$message.error('获取站点列表失败：' + response.msg)
          }
          this.siteLoading = false
        }).catch(err => {
          console.log(err)
          this.$message.error('获取站点列表失败：' + (err.response && err.response.data && err.response.data.msg ? err.response.data.msg : err.message))
          this.siteLoading = false
        })
    },

    // 站点选择变化
    handleSiteChange(siteId) {
      this.form.category_id = null
      this.form.template_id = null
      this.categoryList = []
      this.templateList = []
      if (siteId) {
        this.loadCategoryList(siteId)
        this.loadTemplateList(siteId)
      }
    },

    // 加载分类列表
    loadCategoryList(siteId) {
      this.categoryLoading = true
      const params = {
        site_id: siteId,
        pageSize: 100,
        page: 1
      }

      getStaticSiteCategoryList(new URLSearchParams(params).toString())
        .then(response => {
          if (response.success) {
            this.categoryList = response.data.data.filter(category => category.is_active)
          } else {
            this.$message.error('获取分类列表失败：' + response.msg)
          }
          this.categoryLoading = false
        }).catch(err => {
          console.log(err)
          this.$message.error('获取分类列表失败：' + (err.response && err.response.data && err.response.data.msg ? err.response.data.msg : err.message))
          this.categoryLoading = false
        })
    },

    // 加载模板列表
    loadTemplateList(siteId) {
      this.templateLoading = true
      const params = {
        site_id: siteId,
        pagesize: 100,
        page: 1
      }

      getHtmlTemplateList(params)
        .then(response => {
          if (response.success) {
            this.templateList = response.data.data.filter(template => template.is_active)
          } else {
            this.$message.error('获取模板列表失败：' + response.msg)
          }
          this.templateLoading = false
        }).catch(err => {
          console.log(err)
          this.$message.error('获取模板列表失败：' + (err.response && err.response.data && err.response.data.msg ? err.response.data.msg : err.message))
          this.templateLoading = false
        })
    },

    // 模板类型文本转换
    getTemplateTypeText(type) {
      const typeMap = {
        'landing_page': '落地页',
        'product_page': '产品页',
        'common': '通用页',
        'layout': '布局',
        'component': '组件'
      }
      return typeMap[type] || '未知'
    },

    // 生成网页
    handleGenerate() {
      if (!this.canGenerate) {
        this.$message.warning('请完善所有必填信息')
        return
      }

      // 触发AI任务
      this.$refs.aiTask.handleShowDialog()
    },

    // 预览图片
    previewImage(imageUrl) {
      this.previewImageUrl = imageUrl
      this.imagePreviewVisible = true
    },

    // 处理AI生成结果
    handleAIResult(result) {
      this.$emit('generated', result)
      this.$message.success('网页生成完成')
      this.handleClose()
    },

    // AI任务关闭
    handleAITaskClose() {
      // AI任务关闭时的处理逻辑
    },

    // 获取AI引擎列表
    loadAiEngines() {
      this.engineLoading = true
      GetAiPrompt(null, qs.stringify({
        pagesize: 1,
        page: 1
      })).then(response => {
        if (response.data && response.data.ai_engines) {
          // 确保默认引擎存在
          const hasDefaultEngine = response.data.ai_engines.some(engine => engine.value === 'default')
          if (!hasDefaultEngine) {
            response.data.ai_engines.unshift({
              label: '默认引擎',
              value: 'default'
            })
          }

          // 过滤重复的引擎
          const uniqueValues = new Set()
          const uniqueEngines = response.data.ai_engines.filter(engine => {
            if (uniqueValues.has(engine.value)) {
              return false
            } else {
              uniqueValues.add(engine.value)
              return true
            }
          })

          this.aiEngines = uniqueEngines

          // 如果当前选择的引擎不在列表中，使用第一个引擎
          if (!this.aiEngines.some(engine => engine.value === this.form.engine)) {
            this.form.engine = this.aiEngines.length > 0 ? this.aiEngines[0].value : 'default'
          }
        }
        this.engineLoading = false
      }).catch(err => {
        console.log('获取AI引擎列表失败:', err)
        // 请求失败时使用默认值
        this.aiEngines = [
          { label: '默认引擎', value: 'default' },
          { label: 'GPT-4', value: 'gpt-4' },
          { label: 'GPT-3.5', value: 'gpt-3.5-turbo' },
          { label: 'Claude', value: 'claude' }
        ]
        this.engineLoading = false
      })
    },

    // 处理粘贴事件
    handlePaste(event) {
      console.log('粘贴事件触发')
      const data = event.clipboardData || window.clipboardData
      if (data) {
        // 先检查是否有文本内容，并尝试解析为图片URL
        const textContent = data.getData('text')
        if (textContent && this.isImageUrl(textContent)) {
          console.log('检测到图片URL:', textContent)
          // 直接添加URL到产品图片
          if (!this.form.images) {
            this.form.images = []
          }
          this.form.images.push(textContent)
          this.$message.success('图片URL已添加')
          return
        }

        // 否则检查是否为实际图片文件
        const items = data.items
        console.log('剪贴板项目数量:', items.length)
        let foundImage = false
        for (let i = 0; i < items.length; i++) {
          console.log('项目类型:', items[i].kind, items[i].type)
          if (items[i].kind === 'file' && items[i].type.indexOf('image/') !== -1) {
            const blob = items[i].getAsFile()
            console.log('获取到图片文件:', blob)
            this.handleImageUpload(blob)
            foundImage = true
          }
        }
        if (!foundImage) {
          this.$message.warning('未检测到图片，请确保复制的是图片内容或图片URL')
        }
      } else {
        this.$message.error('无法获取剪贴板数据')
      }
    },

    // 检查字符串是否是图片URL
    isImageUrl(str) {
      // 检查是否是URL格式
      try {
        const url = new URL(str)
        // 检查URL是否指向图片
        const pathLower = url.pathname.toLowerCase()
        const isImageExt =
          pathLower.endsWith('.jpg') ||
          pathLower.endsWith('.jpeg') ||
          pathLower.endsWith('.png') ||
          pathLower.endsWith('.gif') ||
          pathLower.endsWith('.webp') ||
          pathLower.endsWith('.svg') ||
          pathLower.endsWith('.bmp')
        return isImageExt || /\.(jpg|jpeg|png|gif|webp|svg|bmp)/i.test(url.search)
      } catch (e) {
        return false
      }
    },

    // 处理拖拽事件
    handleDrop(event) {
      event.preventDefault()
      const data = event.dataTransfer
      if (data) {
        // 检查是否有文本内容，并尝试解析为图片URL
        const textContent = data.getData('text')
        if (textContent && this.isImageUrl(textContent)) {
          console.log('拖拽的图片URL:', textContent)
          // 直接添加URL到产品图片
          if (!this.form.images) {
            this.form.images = []
          }
          this.form.images.push(textContent)
          this.$message.success('图片URL已添加')
          return
        }

        // 否则检查是否为实际图片文件
        const items = data.items
        let foundImage = false
        for (let i = 0; i < items.length; i++) {
          if (items[i].kind === 'file' && items[i].type.indexOf('image/') !== -1) {
            const blob = items[i].getAsFile()
            this.handleImageUpload(blob)
            foundImage = true
          }
        }

        if (!foundImage) {
          // 尝试从dataTransfer.files获取文件
          const files = data.files
          for (let i = 0; i < files.length; i++) {
            if (files[i].type.indexOf('image/') !== -1) {
              this.handleImageUpload(files[i])
              foundImage = true
            }
          }
        }

        if (!foundImage) {
          this.$message.warning('未检测到图片文件')
        }
      }
    },

    // 处理图片上传
    handleImageUpload(blob) {
      if (!blob) {
        this.$message.error('图片文件无效')
        return
      }

      this.$message.info('正在处理图片...')
      const uploadId = `upload-${Date.now()}` // 创建唯一标识

      // 局部loading状态
      this.imageLoading = true

      const reader = new FileReader()
      reader.onload = (e) => {
        try {
          const base64Data = e.target.result

          // 显示上传进度提示
          this.$notify({
            title: '上传中',
            message: '正在上传图片...',
            type: 'info',
            duration: 0,
            customClass: uploadId
          })

          // 调用上传接口
          UploadBase64Image({
            file_data: base64Data,
            directory_id: -1,
            keyword: 'product-page-generator'
          })
            .then(response => {
              // 上传成功处理
              this.$notify.closeAll()
              this.$notify({
                title: '成功',
                message: '图片上传成功',
                type: 'success',
                duration: 2000
              })

              // 使用返回的URL更新产品图片
              if (!this.form.images) {
                this.form.images = []
              }
              this.form.images.push(response.data.url)

              // 关闭局部loading状态
              this.imageLoading = false
            })
            .catch(error => {
              // 上传失败处理
              this.$notify.closeAll()
              this.$notify({
                title: '错误',
                message: '图片上传失败: ' + (error.message || '未知错误'),
                type: 'error',
                duration: 3000
              })

              // 关闭局部loading状态
              this.imageLoading = false
            })
        } catch (err) {
          console.error('处理图片失败:', err)
          this.$message.error('图片处理失败')

          // 关闭局部loading状态
          this.imageLoading = false
        }
      }
      reader.onerror = () => {
        console.error('读取文件失败')
        this.$message.error('读取文件失败')

        // 关闭局部loading状态
        this.imageLoading = false
      }
      reader.readAsDataURL(blob)
    },

    // 获取焦点
    focusPasteArea(event) {
      event.preventDefault()
    },

    // 移除图片
    removeImage(index) {
      if (this.form.images && this.form.images.length > index) {
        this.form.images.splice(index, 1)
        this.$message.success('图片已删除')
      }
    },

    // 添加图片URL
    addImageUrl() {
      if (!this.imageUrlInput) {
        this.$message.warning('请输入图片URL')
        return
      }

      if (!this.isImageUrl(this.imageUrlInput)) {
        this.$message.warning('请输入有效的图片URL')
        return
      }

      if (!this.form.images) {
        this.form.images = []
      }

      // 检查是否已存在
      if (this.form.images.includes(this.imageUrlInput)) {
        this.$message.warning('该图片URL已存在')
        return
      }

      this.form.images.push(this.imageUrlInput)
      this.imageUrlInput = ''
      this.$message.success('图片URL已添加')
    },

    // 触发文件输入
    triggerFileInput() {
      this.$refs.fileInput.click()
    },

    // 处理文件变化
    handleFileChange(event) {
      const files = event.target.files
      for (let i = 0; i < files.length; i++) {
        const file = files[i]
        this.handleImageUpload(file)
      }
      // 清空文件输入，允许重复选择同一文件
      event.target.value = ''
    },

    // 拖拽开始
    handleDragStart(index, event) {
      this.dragIndex = index
      event.dataTransfer.effectAllowed = 'move'
      event.dataTransfer.setData('text/html', event.target.outerHTML)
    },

    // 拖拽悬停
    handleDragOver(index, event) {
      event.preventDefault()
      event.dataTransfer.dropEffect = 'move'
    },

    // 拖拽进入
    handleDragEnter(index, event) {
      event.preventDefault()
      if (this.dragIndex !== null && this.dragIndex !== index) {
        this.dragOverIndex = index
      }
    },

    // 拖拽离开
    handleDragLeave(index, event) {
      // 检查是否真的离开了元素（避免子元素触发）
      const rect = event.target.getBoundingClientRect()
      const x = event.clientX
      const y = event.clientY

      if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) {
        if (this.dragOverIndex === index) {
          this.dragOverIndex = null
        }
      }
    },

    // 拖拽放置
    handleDragDrop(index, event) {
      event.preventDefault()

      if (this.dragIndex !== null && this.dragIndex !== index) {
        // 执行排序
        const draggedItem = this.form.images[this.dragIndex]
        const newImages = [...this.form.images]

        // 删除原位置的项目
        newImages.splice(this.dragIndex, 1)

        // 在新位置插入项目
        const insertIndex = this.dragIndex < index ? index - 1 : index
        newImages.splice(insertIndex, 0, draggedItem)

        // 更新数组
        this.form.images = newImages

        this.$message.success('图片排序已更新')
      }

      // 重置拖拽状态
      this.dragIndex = null
      this.dragOverIndex = null
    },

    // 拖拽结束
    handleDragEnd(event) {
      // 重置拖拽状态
      this.dragIndex = null
      this.dragOverIndex = null
    }
  }
}
</script>

<style scoped>
.product-page-generator {
  display: inline-block;
}

.upload-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.paste-area {
  padding: 20px;
  border: 2px dashed #d9d9d9;
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
  background-color: #fafafa;
  transition: all 0.3s;
  min-height: 120px;
  outline: none;
}

.paste-area:hover, .paste-area:focus {
  border-color: #409EFF;
  background-color: #f0f9ff;
}

.paste-tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 80px;
  color: #909399;
}

.paste-tip i {
  font-size: 32px;
  color: #409EFF;
  margin-bottom: 10px;
}

.paste-images {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  min-height: 80px;
}

.image-item {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.3s;
  cursor: grab;
}

.image-item:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.image-item:active {
  cursor: grabbing;
}

.image-item.dragging {
  opacity: 0.5;
  transform: rotate(5deg) scale(1.1);
  z-index: 1000;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.image-item.drag-over {
  border: 2px dashed #409EFF;
  background-color: rgba(64, 158, 255, 0.1);
  transform: scale(1.08);
}

.preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.delete-icon {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: rgba(245, 108, 108, 0.9);
  color: white;
  border-radius: 50%;
  padding: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s;
}

.delete-icon:hover {
  background-color: #f56c6c;
  transform: scale(1.1);
}

.drag-handle {
  position: absolute;
  bottom: 2px;
  left: 2px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  border-radius: 3px;
  padding: 2px 4px;
  font-size: 10px;
  cursor: grab;
  transition: all 0.3s;
  opacity: 0;
}

.image-item:hover .drag-handle {
  opacity: 1;
}

.drag-handle:hover {
  background-color: rgba(0, 0, 0, 0.8);
  transform: scale(1.1);
}

.drag-handle:active {
  cursor: grabbing;
}

.url-input-area {
  display: flex;
  align-items: center;
}

.url-input {
  flex: 1;
}

.file-upload-area {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #f9f9f9;
}

.file-upload-area .el-button {
  margin: 0;
}

.image-preview-container {
  text-align: center;
}

.dialog-footer {
  text-align: right;
}

.dialog-footer .el-button + .el-button {
  margin-left: 10px;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .paste-area {
    min-height: 100px;
    padding: 15px;
  }

  .paste-tip i {
    font-size: 24px;
  }

  .image-item {
    width: 80px;
    height: 80px;
  }

  .drag-handle {
    opacity: 1;
    font-size: 12px;
    padding: 3px 5px;
  }

  .url-input-area {
    flex-direction: column;
    gap: 10px;
  }

  .url-input {
    width: 100%;
  }
}
</style>
